<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        font-size: 30px;
      }

      .box1 {
        background: red;
        display: block;
      }

      .box2 {
        background: blue;
        display: none;
      }

      .box3 {
        background: yellow;
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <button class="btn">按钮一</button>
      <button class="btn">按钮二</button>
      <button class="btn">按钮三</button>
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
    </div>
    <div class="container2">
      <button class="btn">按钮一</button>
      <button class="btn">按钮二</button>
      <button class="btn">按钮三</button>
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <button class="next">下一页</button>
    </div>

    <div class="container3">
      <button class="btn">按钮一</button>
      <button class="btn">按钮二</button>
      <button class="btn">按钮三</button>
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
    </div>
    <script>
      // 分析 选项卡对象-----》共性问题 和特性问题 ----》共性问题抽离（类，一类事物） 出来分析 ---》特性问题单独处理

      // 选项卡类 ： 所有选项卡的共性功能；
      // 所有选项卡对象共有的功能；

      function Tab(btns, divs) {
        var nowK = 0;
        this.nowK = nowK;
        this.divs = divs;
        btns.forEach((btn, k) => {
          btn.onclick = () => {
            console.log(k);
            nowK = k;
            this.switchTab(k);
          };
        });
        Tab.prototype.switchTab = function (k) {
          this.divs.forEach((div, key) => {
            if (key == k) {
              div.style.display = "block";
            } else {
              div.style.display = "none";
            }
          });
        };
        // function switchTab(k) {
        //   divs.forEach((div, key) => {
        //     if (key == k) {
        //       div.style.display = "block";
        //     } else {
        //       div.style.display = "none";
        //     }
        //   });
        // }
        // return { switchTab: switchTab, nowK: nowK };
      }

      // 特殊功能
      // 第一个选项卡
      var btns = document.querySelectorAll(".container .btn");
      var divs = document.querySelectorAll(".container div");
      var tab1 = new Tab(btns, divs);

      // 第二个选项卡
      var btns2 = document.querySelectorAll(".container2 .btn");
      var divs2 = document.querySelectorAll(".container2 div");
      var tab2 = new Tab(btns2, divs2);

      // //第二个选项卡 特性功能 ；下一个功能
      var nextBtn = document.querySelector(".next");
      var num = 0;
      nextBtn.onclick = function () {
        console.log(num);
        tab2.switchTab(num);
        num++;
        if (num == 3) {
          num = 0;
        }
      };

      //   // 第三个选项卡
      //   var btns3 = document.querySelectorAll(".container3 .btn");
      //   var divs3 = document.querySelectorAll(".container3 div");
      //   var tab3 = Tab(btns3, divs3);

      //   var num2 = 0;
      //   setInterval(() => {
      //     tab3.switchTab(num2);
      //     num2++;
      //     if (num2 == 3) {
      //       num2 = 0;
      //     }
      //   }, 1000);
    </script>
  </body>
</html>
